<template>
	<view class="">
		<view v-for="(item,index) in list" :key="index" class="search-title" @tap="trigger">
				<view class="contract-center">
					<view class="contract-w1">
						<view class="center1"><image src="../../../static/logo.png" mode=""></image></view>
						<view class="center2">
							<view class="center2-item1">{{item.name}}
							<!-- <text>{{item.num}}</text> -->
							</view>
							<view class="center2-item2">{{item.center}}</view>
						</view>
					</view>
					<view class="contract-w2">
						<view class="w2-text color-fall">+408.8%</view>
						<view class="w2-text1">年化收益率</view>
					</view>
				</view>
				<view class="center-flex1" >
					<view class="flex1">累计跟单投入/收益</view>
					<view class="">0.347810/0.001251 BTC</view>
				</view>
		</view>
		<!-- <view class="btn" @tap="trigger">
			我是跟单发起人
		</view> -->
		<u-loadmore class="loading" :status="srategying" />
		<!-- 暂无数据 -->
		<hide v-if="list.length=='0'"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		props:{
			list:{//记录列表
				type:Array
			},
			srategying:{//加载显示
				type:String
			},
		},
		methods:{
			trigger(){
				this.$Router.push({ path: '/pages/transaction/Sponsor'})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
.search-btn{
	color: $light-color;
	font-size: 28rpx;
}
.search-title{
	background-image: url(../../../static/goods.png);
	@include background;
}
.contract-center{
		@include flex;
		
		padding: 40rpx 20rpx 20rpx;
		margin-top: 30rpx;
		.contract-w1{
			@include flex;
			width: 70%;
		}
		.contract-w2{
			// @include flex;
			width: 30%;
			text-align: right;
			
			.w2-text{
				line-height: 60rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
			.w2-text1{
				line-height: 40rpx;
				font-size: 24rpx;
				color: $color-fu;
				font-weight: 400;
			}
		}
		.center1{
			padding-right: 30rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		.center2{
			.center2-item1{
				font-size: 32rpx;
				line-height: 60rpx;
				text{
					padding: 20rpx;
					color: $color-fu;
					font-size: 24rpx;
				}
			}
			.center2-item2{
				color: $color-fu;
				font-size: 24rpx;
				line-height: 35rpx;
				border-radius: 12rpx;
				border: 1rpx solid $border;
				text-align: center;
			}
		}
		
	}
	.center-flex1{
		@include flex;
		justify-content: space-between;
		background-color: #E6E6E6;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		padding: 10rpx 40rpx ;
		font-size: 24rpx;
		// color: rgba(255, 255, 255, 0.45);
		.flex1{
			@include flex;
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 15rpx;
			}
		}
	}
	.btn{
		background: $light-color;
		border-radius: 44rpx;
		color: #FFFFFF;
		padding: 23rpx 45rpx;
		font-size: 28rpx;
		position: fixed;
		bottom:60rpx;
		width: 90%;
		@include flex;
		&::after{
			content: '';
			position: relative;
			background-image: url(../../../static/icon-back-white.png);
			@include background;
			width: 20rpx;
			height: 28rpx;
			right: -63%;
			transform: rotate(-180deg);
		}
	}
	.loading{
		margin-top: 20rpx !important;
	}
</style>
